<template>
	<div class="login">
		<div class="loginForm">
			<div class="loginTitle">
				瑶池湾网站后台管理
			</div>
			<el-form ref="loginform" :model="loginform" :rules="rules">
				<el-form-item prop="user_name">
					<el-input placeholder="请输入用户名" v-model="loginform.user_name" prefix-icon="iconfont icon-ren" clearable class="inputClass"></el-input>
				</el-form-item>
				<el-form-item prop="user_password">
					<el-input placeholder="请输入密码" v-model="loginform.user_password" prefix-icon="iconfont icon-mima" show-password clearable class="inputClass"></el-input>
				</el-form-item>
				<el-button type="primary" @click="login('loginform')">登录</el-button>	
			</el-form>
		</div>
	</div>
</template>

<script>
	import config from '@/assets/js/config.js'
	export default {
		data(){
			return {
				loginform: {
		          	user_name: '',
		          	user_password: ''
		       	},
		       	rules:{
		       		user_name: [
			            { required: true, message: '请输入用户名', trigger: 'blur' },
			            { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
			        ],
			        user_password: [
			        	{ required: true, message: '请输入密码', trigger: 'blur' },
			        	{ min: 5, message: '密码不能小于5位', trigger: 'blur' }
			        ]
				}
			}
		},
		methods:{
			login(formName){
				this.$refs[formName].validate((valid) => {
		          	if (valid) {
		          		//请求token
		          		//console.log(this.loginform.user_name);
		          		this.$require.post(config.login,{
							password: this.loginform.user_password,
							username: this.loginform.user_name
		          		}).then((res)=>{
							//console.log(res);
							if(res.data.msg.includes("fail")){
								alert("用户名或密码错误,请重新输入!")
							}else{
								//保存token
				            	this.$store.dispatch("setTokenStatus",{
									token:res.data.token
								})
				            	//console.log(this.$store.state.token);
				            	sessionStorage.setItem("token", res.data.token)
				            	this.$router.push({name:"home"})
							}
						}).catch(function(err){
							console.log("登录数据请求失败");
						})
		          	} else {
		            	console.log('error submit!!');
		            	return false;
		          	}
		        });
			}
		}
	}
</script>

<style lang="scss">
	.login{
		width: 100%;
		height: 100%;
		background: #3b4446;
		position: relative;
		.loginForm{
			text-align: center;
			width: 300px;
			height: 350px;
			margin: auto;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			overflow: hidden;
			.loginTitle{
				font-size: 30px;
				color: #dbebfa;
				margin: 20px 0;
			}
			form{
				width: 90%;
				margin: 0 auto;
				padding-top: 20px;
				overflow: hidden;
				.inputClass{
					input{
						background-color: #525e61;
						color: white;
						font-size: 14px;
					}
					span{
						height: 40px;
					}
				}
				.el-button{
					width: 100%;
				}
			}
		}
	}
	
</style>